import React, {
    Component
} from 'react';
import {
    inject,
    observer
} from 'mobx-react';
import Detail from './Detail.js';
import Alert from './Alert.js';
import { Button, Tools, TextareaItem } from 'weaver-mobile';
import { withRouter, Route } from 'react-router-dom';
import { RouteLayout } from 'weaver-mobile-page';
import '../../style/payrollDetail.less';
const getLabel = Tools.getLabel;
const ButtonGroup = RouteLayout.ButtonGroup;

@inject('hrmPayrollDetailStore')
@withRouter
@observer
export default class PayrollDetail extends Component {
    componentWillMount() {
        const targetId = this.props.match.params.id;
        const search = this.props.location.search;

        const params = {
            targetId,
            ...this.getParams(search)
        }

        const {
            hrmPayrollDetailStore
        } = this.props, {
            setTargetId,
            reset
        } = hrmPayrollDetailStore;

        setTargetId(params);
        reset();

        if (window.iNoBounce && window.iNoBounce.isEnabled()) {
            window.iNoBounce.disable();
        }
    }

    componentDidMount() {
        this.props.hrmPayrollDetailStore.getVerifyInfo();
    }

    componentWillUnmount() {
        if (window.iNoBounce && !window.iNoBounce.isEnabled()) {
            window.iNoBounce.enable();
        }
    }

    getParams = (search) => {
        if (search) {
            const params = {};
            search.split("?")[1].split("&").forEach(item => {
                const [key, value] = item.split("=");
                Object.assign(params, {
                    [key]: value
                })
            });

            return params;
        }
    }

    getWidthHeight = () => {
        const scale = 213 / 500;

        const space = 520; //图片宽度500 + 两侧padding20

        const {
            availWidth,
            availHeight
        } = window.screen;

        if (availWidth < space) {
            const cutWidth = availWidth - 20;

            return {
                width: cutWidth,
                height: cutWidth * scale
            }
        } else {
            return {
                width: 500,
                height: 213
            }
        }
    }

    getButtons = () => {
        const { hrmPayrollDetailStore: { confirm, confirmdata, remark, remarkdata, confirmRecord, layout, feedback }, history } = this.props;

        let datas = [];
        if (confirm && !confirmdata) {
            datas.push({
                name: getLabel('826','确定'),
                onClick: confirmRecord
            })
        }
        if (remark && !remarkdata) {
            datas.push({
                name: getLabel('524278','反馈信息') ,
                onClick: () => feedback(history)
            })
        }
        return datas
    }

    render() {
        const {
            hrmPayrollDetailStore,
            history,
        } = this.props, {
            authloading,
            pageloading,
            imgId,
            data,
            displayType,
            isNeedSecondPwdVerify,
            checkSecondPassword,
            defaultImg,
            hasPayrollDetail,
            notAuth,
            layout,
            handleTextareaChange,
            submit,
        } = hrmPayrollDetailStore;

        if (authloading) {
            return null;
        }

        if (notAuth || isNeedSecondPwdVerify) {
            return (
                <Alert type="wuquanxian" msg={getLabel(506009,'暂无权限')}/>
            );
        }

        if (pageloading) {
            return null;
        }

        if (!hasPayrollDetail) {
            return (
                <Alert type="no-data" msg={getLabel(390474,'暂无数据！')}/>
            )
        }

        const btns = this.getButtons();

        const buttonGroupData = [
		  {
		    key: 'clear',
		    text: '取消',
		    onClick: () => history.go(-1),
		  },
		  {
		    key: 'submit',
		    text: '确定',
		    onClick:() => submit(history),
		    type: 'primary',
		  },
		];

        return (
            <div className={`hrm-payroll${(btns.length==0?" noBtns":"" )}`}>
				<div className="detailOutter">
					<div className='payroll-detail'>
						{  (imgId || defaultImg) && (
							<img src={imgId ? `/weaver/weaver.file.FileDownload?fileid=${imgId}` : defaultImg} style={this.getWidthHeight()} className="img"/>
						)}
						<div className='detail-wrap' style={{width: this.getWidthHeight().width+2}}>
							<Detail store={hrmPayrollDetailStore}/> 
						</div>
					</div>
				</div>
				<div className="btns">
					{btns.map(data =><Button type="primary" style={{width: `${100/btns.length}%`}} onClick={data.onClick}>{data.name}</Button> )}
				</div>
				<Route
		          key={layout.id}
		          path={layout.path}
		          render={() => (
		            <RouteLayout>
		              <div
		                key="wmPoutePageDemo"
		                className="wm-route-layout wm-demo-route-layout-page"
		              >
		              	<TextareaItem
                            title={getLabel('524278','反馈信息') }
                            placeholder={getLabel('522179','请输入')}
                            data-seed="logId"
                            ref={el => this.autoFocusInst = el}
                            autoHeight
                            onChange={handleTextareaChange}
                          />
		              	<ButtonGroup data={buttonGroupData} />
		              </div>
		            </RouteLayout>
		          )}
		        />
			</div>
        );

    }
}